<template>
  <div class="common-page stack-level-view">
    <div class="describe">
      <p>
      </p>
    </div>

    <div class="case-wrap">
      <h4 class="title">单行居中，两行靠左，多行省略</h4>
      <div class="sample a">
        <h2>
          <p>单行居中</p>
        </h2>
        <br />
        <h2>
          <p>块标签内 嵌套一个 内联标签，块标签设置字体居中，内联标签设置字体靠左</p>
        </h2>
        <br />
        <h2>
          <p>
            <em> 点击可以显示更多： 块标签内 嵌套一个 内联标签，块标签设置字体居中，内联标签设置字体靠左,内联标签设置字体靠左</em>
          </p>
        </h2>
      </div>
      <p class="desc">
        上面的 例子中，多行文本溢出 的实现如下：
        <ul>
          <li>display: -webkit-box;</li>
          <li>overflow : hidden;</li>
          <li>text-overflow: ellipsis;</li>
          <li>-webkit-line-clamp: 2;</li>
          <li>-webkit-box-orient: vertical;</li>
        </ul>
        通常使用在 移动端，因为 display-webkit-box 仅在webkit 中可用
      </p>
    </div>

    <div class="case-wrap">
      <h4 class="title">任意列数均匀分布 flex</h4>
      <div class="sample b">
        <div class="justify-flex">
          <i>1</i>
          <i>2</i>
          <i>3</i>
          <i>4</i>
          <i>5</i>
        </div>
        <div class="justify-flex">
          <i>1</i>
          <i>2</i>
          <i>3</i>
        </div>
        <div class="justify-flex">
          <i>1</i>
          <i>2</i>
          <i>3</i>
          <i>4</i>
          <i>5</i>
          <i>6</i>
        </div>
      </div>
      <p class="desc">
        弹性布局， 父容器justify-content space-between， 子容器 flex:0 1 0.4rem
      </p>
    </div>
    <div class="case-wrap">
      <h4 class="title">text-align justify 实现</h4>
      <div class="sample b">
        <div class="justify">
          <i>1</i>
          <i>2</i>
          <i>3</i>
          <i>4</i>
          <i>5</i>
        </div>
        <div class="justify">
          <i>1</i>
          <i>2</i>
          <i>3</i>
        </div>
      </div>
      <p class="desc">
        父节点 设置 text-align：justify,当内容总长度 超过一行时（换行），第一行的内容会等比例分布；<br />
        通过 after 伪类，给父节点 内添加一个 假第二行，让第一行子节点实现等比分布
      </p>
    </div>
    <p></p>
  </div> 
</template>

<script>
export default {
  name: 'TextCenterView',
  props: {
  },
  data () {
    return {

    }
  },
  computed: {
  },
  
  watch: {
  },
  created() {

  },
  mounted() {

  },
  methods: {
  }
}
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
.stack-level-view
  .describe
    padding 4px
    p
      margin-bottom 3px
  .case-wrap
    padding 10px
    .title
      font-size 18px
      font-weight bold
    .sample
      padding 5px
      font-size: 16px
    .desc
      color blue
      strong
        font-weight bold
        color red;

.sample.a
  h2
    text-align center
    p
      display inline-block
      text-align left
      em
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        &:active
          display block
          overflow : visible;

.justify-flex
  display flex
  align-items center
  justify-content space-between
  margin-bottom 10px
  &>i
    flex 0 1 20px
    width 20px
    display block;
    line-height 20px
    border-radius 50%
    text-align center
    font-style normal
    background #cccccc

.justify
  text-align: justify;
  background green
  height 20px
  margin-bottom 10px
  &>i
    display inline-block;
    width 20px
    line-height 20px
    border-radius 50%
    text-align center
    font-style normal
    background #cccccc
  &:after
    content ''
    display inline-block
    position relative
    width 100%
    height 0px
</style>



